<template>
    <div class="box">
        <div class="header">讲座</div>
        <van-tabs v-model:active="active">
            <van-tab title="选课">
                <van-cell :title="title" is-link @click="showPopup" />
                <van-popup v-model:show="show" :style="{ height: '50%', width: '70%' }" @click="onclick">
                    <div>
                        <h5>年级设置</h5>
                        <p>小学</p>
                        <div class="btn">
                            <van-button plain round type="default">四年级</van-button>
                            <van-button plain round type="default">五年级</van-button>
                            <van-button plain round type="default">六年级</van-button>
                        </div>
                        <p>初中</p>
                        <div class="btn">
                            <van-button plain round type="default">七年级</van-button>
                            <van-button plain round type="default">八年级</van-button>
                            <van-button plain round type="default">九年级</van-button>
                        </div>
                        <p>高中</p>
                        <div class="btn">
                            <van-button plain round type="default">高一</van-button>
                            <van-button plain round type="default">高二</van-button>
                            <van-button plain round type="default">高三</van-button>
                        </div>
                    </div>

                </van-popup>

                <h3>精选</h3>
                <div class="cart" v-for="item in chairList" :key="item.id">
                    <p class="text">{{ item.subject }}--{{ item.title }}</p>
                    <span>{{ item.data }}</span>
                    <p>{{ item.class }}</p>
                    <div class="left">
                        <van-image :key="item.id" :src="item.image" width="50px" height="50px" />
                        <span style="margin-left: 8px;">{{ item.name }}</span>
                    </div>
                    <div class="right">
                        <div class="top">{{ item.price }}</div>
                        <div class="peplo">已有{{ item.apply }}人报名</div>
                    </div>
                </div>

            </van-tab>
            <van-tab title="学习">
                <van-cell title="学习日历" :value="date" @click="show = true" />
                <van-calendar v-model:show="show" type="range" @confirm="onConfirm" />
                <h4>学习中心</h4>
                <div class="cart" v-for="item in jizuoList" :key="item.id">
                    <p class="text">{{ item.subject }}--{{ item.title }}</p>
                    <span>{{ item.data }}</span>
                    <p>{{ item.class }}</p>
                    <div class="left">
                        <van-image :key="item.id" :src="item.image" width="50px" height="50px" />
                        <span style="margin-left: 8px;">{{ item.name }}</span>
                    </div>
                    <div class="right">
                        <div class="top">{{ item.price }}</div>
                        <div class="peplo">已有{{ item.apply }}人报名</div>
                    </div>
                </div>
                <van-empty description="暂时还没有讲座，去选讲座吧" v-if="jizuoList.length ? false : true">
                    <van-button round type="success" class="bottom-button" @click="onrouter">去选讲座</van-button>
                </van-empty>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup lang="ts">
import { getChair } from '@/api/course'
import { ref, onMounted } from 'vue';
import type { Ref } from 'vue'
import { useRouter } from "vue-router";

const router = useRouter()


// 选课
// 选择
const showPopup = () => {
    show.value = true;
};


// 精选
interface IChair {
    title: string,
    name: string,
    id: number,
    data: string,
    apply: string,
    price: string,
    image: string,
    class: string,
    subject: string
}
const chairList: Ref<IChair[]> = ref([])
const jizuoList: Ref<IChair[]> = ref([])

const title = ref('七年级')
const btn: Ref<boolean> = ref(true)

onMounted(async () => {
    const { data } = await getChair()
    chairList.value = data.filter(item => {
        return item.class == title.value
    }) 
    
    const jizuo = JSON.parse(window.localStorage.getItem('jizuo'))
    if (jizuo) {
        jizuoList.value.push(jizuo)
     
    }
})

const onclick = async (e: any) => {
    title.value = e.target.innerText
    show.value = false
    const { data } = await getChair()
    chairList.value = data.filter(item => {
        return item.class == title.value
    })
}


// 学习
// 学习日历
const date = ref('')
const show = ref(false)
const formatDate = (date: any) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (values: any) => {
    const [start, end] = values;
    show.value = false;
    date.value = `${formatDate(start)} - ${formatDate(end)}`;
};

const onrouter = () => {
    router.push('/jiangzuo')
}

</script>

<style scoped>
h4,
h3 {
    margin-left: 12px;
}

h5 {
    text-align: center;
    font-size: 16px;
    line-height: 0px;
}

p {
    font-size: 14px;
    margin-left: 10px;
}

.btn {
    display: flex;
    justify-content: space-evenly;
}

.cart {
    border: 1px solid #ccc;
    width: 350px;
    height: 170px;
    margin: 0 auto;
    padding-left: 10px;
    position: relative;
    box-sizing: border-box;

    .text {
        font-size: 18px;
        font-weight: bold;
    }

    .left {
        position: absolute;
        bottom: 5px;
        left: 10px;
        text-align: center;
    }

    .right {
        position: absolute;
        bottom: 15px;
        right: 10px;
        text-align: right;

        .top {
            font-size: 18px;
            margin-bottom: 5px;
            color: red;
        }
    }
}
</style>